<style>
  .integral-header{
    background: #F6F6F6;
    padding:16px;
    display: flex;
    align-items: center;
  }
  .integral-header-label{
    font-size: 14px;
    color: #1D1F21;
    line-height: 16px;
  }
  .integral-header-total{
    font-weight: bold;
    font-size: 24px;
    color: #1D1F21;
    line-height: 28px;
    margin-top:8px
  }
  .mo-pagination{
    padding: 16px !important;
  }
  .integral-content{
    background: #F6F6F6;
    margin-top: 16px;
  }
  .integral-content-title{
    background: #DDDDDD;
    padding: 12px 16px;
    font-size: 14px;
    color: #1D1F21;
    line-height: 19px;
    font-weight: bold;
  }
  
  .integral-content-cell{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap:4px;
  }
  .integral-content-item{
    padding: 16px 0;
    margin:0 16px;
    display: flex;
    flex-direction: column;
    gap:4px;
    border-bottom: 1px dashed #DDDDDD;
  }
  .content-cell-title{
    font-weight: bold;
    font-size: 16px;
    color: #1D1F21;
    line-height: 22px;
    margin-bottom: 6px;
  }
  .content-cell-expire{
    font-size: 14px;
    color: #999999;
    line-height: 22px;
  }
  .content-cell-note{
    font-size: 14px;
    color: #999999;
    line-height: 22px;
  }
  .integral-content-date{
    font-size: 14px;
    color: #999999;
    display: flex;
    align-items: center;
  }
  @media screen and (min-width: 767px) {
    .integral-content-date{
      margin-top: 0;
    }
   .integral-header{
      padding: 24px;
    }
    .integral-header-total{
      margin-top: 16px;
    }
    .integral-content-title{
      padding:16px 24px;
      font-size: 16px;
    }
    .integral-content-item{
      padding: 24px 0;
      margin:0 24px;
      flex-direction: row;
      align-items: center;
    }
    .integral-content-cell{
      gap:8px
    }
    .mo-pagination{
    padding: 24px !important;
  }
  }
</style>
<div class="container_wrapper account_orders" >
  <h1 class="title">{{lang.customer.customer_points}}</h1>

  <div class="integral-header">
      <div style="flex: 1;flex-shrink: 0;">
        <label class="integral-header-label">{{rules.points_name}}</label>
        <h1 class="integral-header-total">{{points_total}}</h1>
      </div>
      <a class="mo-btn secondary_btn" style="margin-top: 0;padding:0 15px;height:32px;line-height: 32px;font-size:14px" href="{{rules.rule_link}}">{{lang.customer.about_points | replace: '{points_name}',rules.points_name}}</a>
  </div>
  {% assign length = points | size %}
  {% if length %}
    <div class="integral-content">
      <div class="integral-content-title">{{lang.customer.points_history}}</div>
      {% for point in points %}
      <div class="integral-content-item">
        <div class="integral-content-cell">
          <span class="content-cell-title">{% if point.type == 1%}+{% else %}-{% endif %} {{point.points}} {{rules.points_name}}</span>
          {% if point.expired_at %}
            <div class="content-cell-expire">{{lang.customer.points_expire_time}}: {{point.expired_at | date: "%Y-%m-%d %H:%M:%S"}}</div>
          {% endif %}
          {% if point.event_code == 'order_paid' %}
           <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.order_paid_points| replace: '{order_no}',point.note }}</div>
          {% elsif point.event_code == 'customer_sub' %}
            <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.customer_sub }}</div>
           
          {% elsif point.event_code == 'customer_reg' %}
              <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.customer_reg }}</div>
             
          {% elsif point.event_code == 'customer_login' %}
                <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.customer_login }}</div>
             
          {% elsif point.event_code == 'product_comment' or point.event_code == 'product_comment_img'  %}
            <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.customer_comment }}</div>
             
          {% elsif point.event_code == 'order_cancel' %}
            <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.order_clear_back | replace: '{points_name}',rules.points_name | replace: '{order_no}',point.note }}</div>

          {% elsif point.event_code == 'admin_inc' or point.event_code == 'admin_dec' %}
            <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{point.note }}</div>
    
          {% elsif point.event_code == 'created_order' %}
            <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.order_use  | replace: '{order_no}',point.note | replace: '{points_name}',rules.points_name }}</div>

          {% elsif point.event_code == 'points_expire' %}
            <div class="content-cell-note">{{lang.account.orders_detail.note}}: {{lang.customer.points_expire | replace: '{points_name}',rules.points_name }}</div>
          {% endif %}
        </div>
        <div class="integral-content-date">
          <svg t="1732861971645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7228" width="16" height="16"><path d="M512 64a448 448 0 1 1 0 896A448 448 0 0 1 512 64z m0 64a384 384 0 1 0 0 768A384 384 0 0 0 512 128z m0 96a32 32 0 0 1 32 32L544 503.488l212.48 175.872a32 32 0 0 1 7.488 40.32l-3.2 4.736a32 32 0 0 1-45.12 4.224l-224-185.408a32 32 0 0 1-11.584-24.64V256a32 32 0 0 1 32-32z" fill="#999999" p-id="7229"></path></svg>
          <span style="line-height: 22px;margin-left:4px">{{point.created_at | date: "%Y-%m-%d %H:%M:%S"}}</span>
        </div>
      </div>
      {% endfor %}  
      {% include pagination ,{paginate:paginate } %}
    </div>
  {% else %}
  {% assign points_empty = lang.checkout.points_empty|replace: '{points_name}',rules.points_name %}
  {% include 'empty', text:points_empty %}
  {% endif %}

  <div class="back-box">
    <a href="/account">
      <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
      <span>{{ lang.account.default.account }}</span>
    </a>
  </div>
</div>